<template>
  <div>
    <!-- 图表 -->
    <PanelChart>
      <template slot="header">
        <div class="header">
          <i class="iconfont icon-hangyedongtai"></i>
          <h4>技术趋势分析</h4>
          <div class="tools">
            <!-- <button @click="exportData"><i class="el-icon-download"></i>导出数据</button> -->
            <button @click="saveImg"><i class="el-icon-download"></i>保存图片</button>
          </div>
        </div>
      </template>
      <template slot="tip">
        <p class="tip">统计技术领域的专利申请量和公开量在各个年代上的变化情况，能够从一定程度上反映该技术的发展趋势。</p>
      </template>
      <template slot="config">
        <div class="date-box">
          <span class="tit">起止时间：</span>
          <div class="search-time">
            <div class="picker-box">
              <el-date-picker
                v-model="startDate"
                size="small"
                placeholder="开始日期"
                prefix-icon="date-prefix"
                :clearable="false"
                :picker-options="pickerStart"
                class="el-date-picker"
                @change="changestartDate">
              </el-date-picker>
              <i class="icon el-icon-date"></i>
            </div>
            <span class="split"></span>
            <div class="picker-box">
              <el-date-picker
                v-model="endDate"
                size="small"
                placeholder="结束日期"
                prefix-icon="date-prefix"
                :clearable="false"
                :picker-options="pickerEnd"
                class="el-date-picker"
                @change="changeendDate">
              </el-date-picker>
              <i class="icon el-icon-date"></i>
            </div>
          </div>
        </div>
      </template>
      <template slot="chartBtn">
        <div class="chart-btn">
          <el-button v-for="(item, index) in cbtns" :key="index" :class="['btn', item.icon, {'active': cbtnActive===item.type}]" @click="handleChangeCbtn(item)"></el-button>
        </div>
      </template>
      <template slot="chart">
        <ChartA ref="chartA" chartId="chartOne" :chartData="chartData"/>
      </template>
    </PanelChart>
    <!-- 表格 -->
    <PanelTable ref="panelTable" :tableData="tableData" />
  </div>
</template>

<script>
import axios from 'axios'
import PanelChart from './PanelChart'
import PanelTable from './PanelTable'
import ChartA from './chart/echarts/ChartA'
import {getDate} from '@/utils/utils'
export default {
  components: {
    PanelChart,
    PanelTable,
    ChartA
  },
  data() {
    return {
      opts: {},
      chartData: [],
      tableData: {
        tit: [],
        content: []
      },
      startDate: null,
      endDate: null,
      pickerStart: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.endDate, 'gt')
        }
      },
      pickerEnd: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.startDate, 'lt')
        }
      },
      cbtns: [
        {type: 'line', icon: 'iconfont icon-zhexiantu'},
        {type: 'bar', icon: 'iconfont icon-situation'},
      ],
      cbtnActive: 'line',
      cancel: null
    }
  },
  methods: {
    init(opts) {
      this.opts = opts
      this.getChartData()
    },
    // 图表数据
    getChartData() {
      let ths = this
      if (this.cancel) {
        this.cancel()
      }
      this.$get(this.$Url.TI.techniqueDevelopmentTrend, {
        keyword: this.opts.searchTxt || '',
        start: this.startDate ? moment(this.startDate).format('YYYY-MM-DD') : '',
        end: this.endDate ? moment(this.endDate).format('YYYY-MM-DD') : ''
      }, new axios.CancelToken(function executor(c) {
        ths.cancel = c
      })).then(res => {
        let data = res.data
        let adArr = data.ad || []
        let isdArr = data.isd || []
        let adData = ['申请日']
        let isdData = ['公开/公告日']
        let dateArr = []
        adArr.forEach(v => {
          dateArr.push(v.keyAsString.split('-')[0])
          // adData.push(v.docCount)
        })
        isdArr.forEach(v => {
          dateArr.push(v.keyAsString.split('-')[0])
          // isdData.push(v.docCount)
        })
        dateArr = Array.from(new Set(dateArr))
        dateArr.forEach(v => {
          let adObj = adArr.find(b => b.keyAsString.indexOf(v) > -1)
          let isdObj = isdArr.find(b => b.keyAsString.indexOf(v) > -1)
          let adVal = adObj ? adObj.docCount : '-'
          let isdVal = isdObj ? isdObj.docCount : '-'
          adData.push(adVal)
          isdData.push(isdVal)
        })
        let chartData = [
          ['product', ...dateArr],
          adData,
          isdData
        ]
        this.chartData = chartData
        this.getTableData(dateArr)
      }).catch(err => {})
    },
    // 表格数据
    getTableData(dateArr) {
      this.tableData = {
        tname: '技术趋势分析',
        tit: ['序号', '类型', ...dateArr],
        content: this.chartData.filter((v, i) => i>0)
      }
    },
    changestartDate(val) {
      this.startDate = val
      this.getChartData()
    },
    changeendDate(val) {
      this.endDate = val
      this.getChartData()
    },
    disabledDate(time, year, type) {
      if (type === 'gt') {
        if (year && year !== '') {
          if (time > year) {
            return true
          }
          return false
        }
      } else if (type === 'lt') {
        if (year && year !== '') {
          if (time < year) {
            return true
          }
          return false
        }
      }
    },
    handleChangeCbtn(item) {
      this.cbtnActive = item.type
      this.$refs.chartA.changeGraphType(item.type)
    },
    saveImg() {
      this.$refs.chartA.downloadImg()
    },
    exportData() {
      this.$refs.panelTable.exportData()
    }
  },
  mounted() {
    let {startDate, endDate} = getDate(10)
    this.startDate = startDate
    this.endDate = endDate
  }
}
</script>

<style lang="scss" scoped>

</style>